<template>
  <div class="detail" v-if="state.show">
    <!-- nav -->
    <Nav :titleItem="state.titleItem" @clickItem="clickItem" />
    <Scroll class="scros" @scrolls="scrolls">
      <div>
        <!-- Banner  -->
        <div>
          <Banner :banner="state.banner" />
        </div>
        <!-- 商品介绍 -->
        <Message
          :state="state.message"
          :columns="state.columns"
          :footer="state.columnsFooter"
        />
        <!-- 商家信息区域 -->
        <SellerMessage :data="state.shopInfo" />
        <!-- 穿着信息 -->
        <ImagesMessage :data="state.Wear" :imageslist="state.imageslist" />
        <!-- 尺码信息 -->
        <paramInfo
          :rule1="state.rule1"
          :rule2="state.rule2"
          :info="state.info"
          @rule="rule"
        />
        <!-- 评论区域 -->
        <CommentInfo
          :info="state.commentInfo"
          :commentUser="state.commentUser"
          @CommentInfo="CommentInfos"
        />
        <!-- 推荐区域 -->
        <van-cell-group>
          <van-cell border title="热门推荐" />
        </van-cell-group>
        <RecommendedTab />
      </div>
    </Scroll>
    <!-- 商品导航 -->
    <GoodsAction @add="add" @nowBuy="nowBuy" />
    <BackTop @click="back"></BackTop>
  </div>
  <div v-else>
    <Loding />
  </div>
</template>

<script setup>
import { reactive, onActivated, onUnmounted, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getdetail, goods, recommend } from "@/utils/http.js";
import { useStore } from "vuex";
// 组件
import Nav from "@/views/detail/children/Nav.vue"; //导航栏组件
import Banner from "@/views/detail/children/Banner.vue"; //轮播组件
import Message from "@/views/detail/children/GoodsMessage.vue"; //商品信息组件
import SellerMessage from "@/views/detail/children/SellerMessage.vue"; //商家信息组件
import ImagesMessage from "@/views/detail/children/ImagesMessage.vue"; //商家信息组件
import paramInfo from "@/views/detail/children/param-info.vue"; //商家信息组件
import CommentInfo from "@/views/detail/children/CommentInfo.vue"; //商家信息组件
import RecommendedTab from "@/components/content/RecommendedTab.vue"; //商家信息组件
import GoodsAction from "@/views/detail/children/GoodsAction.vue"; //商品导航
import Loding from "@/components/common/Loding.vue"; //loding 组件
import Scroll from "@/components/common/Scroll";
import BackTop from "@/components/common/Back.vue";
import { times } from "vant/lib/datetime-picker/utils";
import { Notify } from "vant";
// 导入
const store = useStore();
const route = useRoute();
const router = useRouter();
store.commit("setstatus", false);
const id = route.params.id;
const state = reactive({
  show: false,
  banner: [],
  goodsdetail: {},
  titleItem: ["商品", "参数", "评论", "推荐"],
  message: [],
  columns: [],
  columnsFooter: [],
  // 商家信息
  shopInfo: [],
  // 穿着效果数据
  Wear: [],
  imageslist: [],
  rule1: [], //尺寸1
  rule2: [], //尺寸2
  info: [], //具体数据
  commentInfo: [], //评论信息
  commentUser: {}, //评论用户信息
  scrollRule: null, //参数 el
  ScrollComment: null, //评论 el
  list: {}, //点击加入购物车的列表数据
  iid: 0, //id
  count: 0, //点击多少次加入购物车
  skuInfo: {},
});
// 获取数据
const getdata = async (id) => {
  const { data: res } = await getdetail(id);
  if (res.status.code !== 1001) return;
  // 商品规格
  state.skuInfo = res.result.skuInfo;
  // id
  state.iid = res.iid;
  // 轮播图照片数据等
  state.banner = res.result.itemInfo.topImages;
  state.columns = res.result.columns;
  state.message = new goods(res.result.itemInfo, res.result.shopInfo.services);
  state.columnsFooter = state.message.columns.pop(1);
  // 上面是商品信息数据
  state.shopInfo = res.result.shopInfo;
  // 穿着效果数据
  state.Wear = res.result.detailInfo;
  state.imageslist = state.Wear.detailImage[0];
  // 商品参数
  state.rule1 = res.result.itemParams.rule.tables[0];
  state.rule2 = res.result.itemParams.rule.tables[1];
  state.info = res.result.itemParams.info.set;
  // 保存回复信息
  state.commentInfo = res.result.rate.list[0];
  state.commentUser = res.result.rate.list[0].user;
  state.show = true;
};
onMounted(() => {});
//nav 子组件传递过来的点击事件 进行定位
const clickItem = (item) => {
  if (item == "参数") {
    state.scroll.scrollToElement(state.scrollRule, 500); //el,+ 滚动时常
  } else if (item == "评论") {
    state.scroll.scrollToElement(state.ScrollComment, 500); //el,+ 滚动时常
  } else if (item == "推荐") {
    state.scroll.scrollToElement(state.ScrollComment, 500, 1000, 182); //el,+ 滚动时常
  } else {
    state.scroll.scrollTo(0, 0, 300);
  }
};

// 切换导航
onActivated(() => {
  let id = route.params.id;
  getdata(id);
});
// Scroll 传递过来的 scroll 对象
const scrolls = (msg) => {
  state.scroll = msg;
};
// 返回顶部
const back = () => {
  console.log(123);
  state.scroll.scrollTo(0, 0, 300);
};
// 参数组件传递过来的 El
const rule = (el) => {
  state.scrollRule = el;
};
//评论组件传递过来的 El
const CommentInfos = (el) => {
  state.ScrollComment = el;
};
// 加入购物车点击事件
const add = () => {
  const list = {};
  list.img = state.banner[0]; //商品图片
  list.checked = true; //选中状态
  list.count = 1; //点击商品数量
  list.id = state.iid; //商品id
  list.title = state.message.title; //商品标题
  list.price = state.message.iteminfo.lowNowPrice; //商品价格
  list.oldPrice = state.message.iteminfo.lowPrice; //原价
  list.shopName = state.shopInfo.name; //商家名字
  list.shopLogo = state.shopInfo.shopLogo; //商品参数
  // list.rule1 = state.rule1; //参数1
  // list.rule2 = state.rule2; //参数1
  // list.info = state.info; //参数3
  list.skuInfo = state.skuInfo,//商品规格
  // 传递到 vuex
  store.commit("addcart", list);
  console.log(list);
  Notify({ type: "success", message: "加入成功,快去购物车查看吧！" });
};
// 立即购买按钮
const nowBuy = () => {
  router.push("/category");
  store.commit("setstatus", true);
};
</script>

<style lang="scss" scoped>
.detail {
  height: 100vh;
}
.scros {
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
  overflow: hidden;
}
</style>
